<template>
    <div v-loading="loading">
        <keyHeader ref="keyHeader" :data="data" :keyType="keyType"></keyHeader>

        <div class="addNewLine-btn"><el-button type="primary" @click="editDialogVisible=true;editFormParam={}">{{$t('publicFeedback.addNewLine')}}</el-button></div>

        <el-table :data="zsetList" border style="width: 100%" class="redisDataTable">
            <el-table-column type="index" label="index" width="180"> </el-table-column>
            <el-table-column label="Member" prop="member">
                <template slot-scope="scope">
                    <el-popover placement="top-start" trigger="hover" width="400" :content="scope.row.member.substring(0,500)+'...'">
                        <span slot="reference" style='white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'>{{scope.row.member.substring(0,200)}}</span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="Score" prop="score" width="180"></el-table-column>
            <el-table-column>   
                <template slot="header" slot-scope="scope">
                    <el-input v-model="searchTxt" size="mini" @keyup.enter.native="search(searchTxt)" :placeholder="$t('aside.PleaseEnter')+'('+$t('publicFeedback.EnterKeyStartSreach')+')'"/>
                </template>
                <template slot-scope="scope">
                    <el-button type="warning" icon="el-icon-edit" circle  size="small" @click="editLineClick(scope)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle  size="small" @click="delLine(scope)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <div class="loadMore">
            <el-button :disabled="loadDoNone" @click="loadMore">{{$t('aside.loadMore')}}</el-button>
        </div>

        <!-- 编辑弹框 -->
        <editZsetLineDialog :editDialogVisible="editDialogVisible" :editFormParam="editFormParam" 
        @hideDialog="editDialogVisible=false" @saveZset="editZsetLine"></editZsetLineDialog>


    </div>
</template>

<script>
import  keyHeader from './keyHeader'
import editZsetLineDialog from '@/components/dialog/editZsetLineDialog'
export default {
    components:{
        keyHeader,editZsetLineDialog
    },
    props:["data","keyType"],
    data(){
        return {
            options:{
                match:"*",
                count:200
            },
            editDialogVisible:false,
            searchTxt:"",
            zsetList:[],
            stream:{},
            PausePoint:0,
            loadDoNone:false,
            editFormParam:{},
            loading:false
        }
    },
    created(){
        this.init();
    },
    methods:{
        //初始化页面
        init(){
            this.refushZsetList();
        },
        //刷新页面
        refushZsetList(){
            const self=this;
            self.zsetList=[];
            self.loading=true
            let stream=this.data.redisClient.zscanStream(this.data.key,this.options);
            this.stream=stream;
            stream.on('data',function(list){
                let zsetList=[];
                for (let i = 0; i < list.length; i += 2) {
                    zsetList.push({
                        member: list[i],
                        score: list[i+1]
                    });
                }
                self.zsetList=self.zsetList.concat(zsetList)
                self.PausePoint+=zsetList.length
                //每满足200+以上则暂停
                if(self.PausePoint>=self.options.count){
                    stream.pause();
                    self.PausePoint=0;
                    self.loading=false
                }
            })
            stream.on('end',function(){
                self.loadDoNone=true
                self.stream=null
                self.loading=false
            })
        },
        //加载更多
        loadMore(){
            this.stream.resume();
        },
        //搜索
        search(searchTxt){
            this.options.match=searchTxt==="*"?"*":"*"+searchTxt+"*"
            this.refushZsetList();
        },
        //删除一行
        delLine(scope){
            this.$confirm(this.$t("publicFeedback.delLineTips"),this.$t("aside.tips"),{
                confirmButtonText: this.$t('aside.determine'),
                cancelButtonText: this.$t('aside.cancel'),
                cancelButtonClass: "btn-custom-cancel",
                type: 'warning'
            }).then(()=>{
                this.data.redisClient.zrem(this.data.key,scope.row.member).then((res)=>{
                    if(res===1){
                        this.zsetList.splice(scope.$index,1)
                    }
                    this.$message.success({
                        message:this.$t('publicFeedback.delSuccess')
                    })
                }).catch((e)=>{
                    this.$message.error({
                        message:e.message
                    })
                })
            }).catch(()=>{})
        },
        //编辑一行点击事件
        editLineClick(scope){
            this.editFormParam=scope
            this.editDialogVisible=true
        },
        //编辑zset
        editZsetLine(data){
            this.data.redisClient.zadd(this.data.key,data.score,data.member).then((res)=>{
                if(res===1){
                    this.zsetList.push({
                        score:data.score,
                        member:data.member
                    });
                    if(this.data.type==="addKey"){
                        this.$eventBus.$emit("refushKeyList",{client:this.data.redisClient,type:"add",key:this.data.key})
                        this.$eventBus.$emit("reloadKeyWindow",{client:this.data.redisClient})
                        this.$refs.keyHeader.init();
                    }
                }
                this.$message.success({
                    message:this.$t('publicFeedback.saveSuccess')
                })
                this.editDialogVisible=false
            }).catch((e)=>{
                this.$message.error({
                    message:e.message
                })
            })
        }
    },
    watch:{
        data(newValue,oldValue){
            this.init()
        }
    }
}
</script>